import React, { useEffect, useState } from 'react'
import { NavBar, ShareSheet, Button, Toast } from 'react-vant';
import MyIcon from '@/components/myIcon'
import { useNavigate } from 'react-router-dom';
import s from './style.module.less'
import axios from '@/utils/axios.js'


import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';


echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);


export default function CityPrice() {
  const navigate = useNavigate()
  const options = [
    { name: '微信', icon: <MyIcon name='icon-weixin' fontSize='30px' /> },
    { name: '朋友圈', icon: <MyIcon name='icon-pengyouquan' fontSize='30px' /> },
    { name: '微博', icon: <MyIcon name='icon-weibo' fontSize='30px' /> },
  ]
  const [visible, setVisible] = useState(false)
  const [toast, setToast] = useState('订阅')
  const [readingData, setReadingData] = useState([])
  const getData = async () => {
    const result = await axios.get('/city/cityPrice')
    console.log(result.data.data)
    setReadingData(result.data.data)
    console.log(readingData);
  }
  // echarts
  useEffect(() => {
    getData()
    var chartDom1 = document.getElementById('echarts1');
    var chartDom2 = document.getElementById('echarts2');
    var myChart1 = echarts.init(chartDom1);
    var myChart2 = echarts.init(chartDom2);
    var option1;
    var option2;

    option1 = {
      title: {
        text: '二手房贝壳指数',
        left: 0,
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        right: 10,
        data: [
          {
            name: '挂牌均价',
            icon: 'circle',
            textStyle: {
              fontSize: 12,
            }
          },
          {
            name: '贝壳指数',
            icon: 'circle',
            textStyle: {
              fontSize: 12
            }
          }
        ]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['12月', '02月', '04月', '06月', '08月', '10月', '12月'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '挂牌均价',
          type: 'line',
          stack: 'Total',
          data: [13904, 14001, 12570, 13736, 13999, 14511, 13852, 13905, 13900, 14077, 13983, 13971, 13969]
        },
        {
          name: '贝壳指数',
          type: 'line',
          stack: 'Total',
          data: [12266, 12316, 12209, 12294, 12298, 12314, 12318, 12316, 12224, 12263, 12193, 12105, 12078]
        },
      ]
    };
    option2 = {
      title: {
        text: '二手房供需走势',
        left: 0,
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        right: 10,
        data: [
          {
            name: '新增房源',
            icon: 'circle',
            textStyle: {
              fontSize: 12,
            }
          },
          {
            name: '新增带看',
            icon: 'circle',
            textStyle: {
              fontSize: 12
            }
          }
        ]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['12月', '02月', '04月', '06月', '08月', '10月', '12月'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增房源',
          type: 'line',
          stack: 'Total',
          data: [6638, 6117, 4043, 8646, 8465, 7851, 4710]
        },
        {
          name: '新增带看',
          type: 'line',
          stack: 'Total',
          data: [31905, 23228, 10420, 36722, 33939, 37271, 19988]
        },
      ]
    }

    option1 && myChart1.setOption(option1);
    option2 && myChart2.setOption(option2);
  }, [])

  const showToast = () => {
    if (toast === '订阅') {
      setToast('已订阅')
      Toast.info('订阅成功')
    } else {
      setToast('订阅')
      Toast.info('已取消订阅')
    }
  }

  return (
    <div>
      <div className={s.main}>
        <div className={s.topArea}>
          <div className={s.navbar}>
            <NavBar
              title="贝壳指数"
              leftText="返回"
              rightText={<MyIcon name='icon-fenxiang' fontSize='20px' />}
              onClickLeft={() => navigate('/')}
              onClickRight={() => setVisible(true)}
            />
            <ShareSheet
              visible={visible}
              options={options}
              title='立即分享给好友'
              onCancel={() => setVisible(false)}
              onSelect={(option, index) => {
                console.log('option', option)
                console.log('index', index)
                setVisible(false)
              }}
            />
          </div>

          <div className={s.top}>
            <div className={s.content}>
              <div className={s.contentTitle}>北京·1月贝壳指数</div>
              <div className={s.right}>
                <div className={s.area}>城区/商区</div>
                <div className={s.arrow}></div>
              </div>
            </div>
            <div className={s.price}>
              <div className={s.money}>
                <div className={s.num}>12708</div>
                <div className={s.squ}>元/平</div>
              </div>
              <div className={s.monthBox}>
                <div className={s.month}>
                  <div className={s.percent}>0.2%</div>
                  <div className={s.words}>环比上月</div>
                </div>
                <div className={s.month}>
                  <div className={s.percent}>1.5%</div>
                  <div className={s.words}>同比上年</div>
                </div>
              </div>
              <div className={s.button}>
                <Button type='default' size='mini' onClick={() => showToast()} className={s.buttonChild}>{toast}</Button>
              </div>
            </div>
          </div>

          <div className={s.deal}>
            <div className={s.dealTop}>
              <div className={s.box}>
                <div className={s.boxName}>成交(套)</div>
                <div className={s.boxNum}>19</div>
              </div>
              <div className={s.box}>
                <div className={s.boxName}>新增房(套)</div>
                <div className={s.boxNum}>160</div>
              </div>
              <div className={s.box}>
                <div className={s.boxName}>新增客(人)</div>
                <div className={s.boxNum}>788</div>
              </div>
              <div className={s.box}>
                <div className={s.boxName}>带看量(次)</div>
                <div className={s.boxNum}>509</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div className={s.mapBox}>
        <div className={s.map}>
          <div id='echarts1' style={{ width: 300, height: 200 }} ></div>
          <div className={s.botton}>
            <div className={s.one}>数据来源:均价数据来自贝壳成交系统统计</div>
            <div className={s.two}>更新时间:2022年12月</div>
          </div>
        </div>

        <div className={s.map}>
          <div id='echarts2' style={{ width: 300, height: 200 }} ></div>
          <div className={s.botton}>
            <div className={s.one}>数据来源:均价数据来自贝壳成交系统统计</div>
            <div className={s.two}>更新时间:2022年12月</div>
          </div>
        </div>


      </div>


      <div className={s.zixun}>
        <div className={s.title}>行情资讯</div>
        
        {
         readingData.map((item, index) => {
        
          return  (<div key={index} className={s.content}> 
            <div className={s.contentLeft}>
              <div className={s.contentTitle}>{item.title}</div>
              <div className={s.bottom}>
                <div className={s.name}>{item.auth}</div>
                <div className={s.day}>{item.data}</div>
              </div>
            </div>
            <div className={s.contentRight}>
              <img src={item.img}alt="" />
            </div>
          </div>)
          })
        }


      </div>



    </div>
  )
}
